<template>
    <view class="p-bot40" :style="{ '--color': color }">
        <u-navbar
            title="预定订单"
            @rightClick="rightClick"
            :autoBack="true"
            placeholder
            :titleStyle="titleStyle">
        </u-navbar>

        <view class="tabs">
            <view
                class="lis"
                :class="{ Active: state == item.state }"
                v-for="(item, index) in list1"
                :key="index"
                @click="click(item)"
                >{{ item.name }}</view
            >
        </view>

        <view class="list" v-for="(item, index) in pageData" :key="index">
            <view class="row j-sb a-center">
                <text class="name">{{ item.time_detail.name }}</text>
                <text class="color_99 size28">{{ item.config_name }}</text>
            </view>

            <text class="txtie">数量：{{ item.sites_detail.length }}</text>
            <text class="txtie">金额：{{ item.order_price }}</text>
            <text class="txtie">时间：{{ item.time_detail.open_time_stamp }}</text>
            <text class="txtie">状态：{{ orderStare(item) }}</text>
            <view class="lokk" @click="toDetails(item.id)">详情</view>
        </view>
        <!-- 	<view class="tabs redbor">
			<u-tabs
				:list="list1"
				:scrollable="false"
				lineColor="#d85e59"
				@click="click"
				:current="current"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"></u-tabs>
		</view> -->

        <!-- <view
			class="list"
			:class="{ expired: item.state == 4 }"
			v-for="(item, index) in pageData"
			:key="index"
			@click="toDetails(item.id)">
			<view class="Tips Waiting" v-if="item.state == 1 || item.state == 3">待使用</view>
			<view class="Tips used" v-if="item.state == 2">已使用</view>
			<view class="Tips expiredbg" v-if="item.state == 4">已过期</view>
			<view class="Tips expiredbg" v-if="item.state == 5">已退款</view>
			<view class="Tips expiredbg" v-if="item.state == 6">退款中</view>
			<image :src="$imgUrls(item.time_detail.img)" mode="aspectFill" class="Img"></image>
			<view class="conTxt">
				<text class="name ellipsis">{{ item.time_detail.name }}</text>
				<text class="Time">购买时间:{{ item.add_time }}</text>
				<text class="Time">开宴时间:{{ item.time_detail.open_time_stamp }}</text>
				<view class="row">
					<view
						class="table_li"
						v-for="(subItem, subIndex) in item.sites_detail"
						:key="subIndex">
						{{ subItem.type_name }}-{{ subItem.name }}
					</view>
				</view>
			</view>

			<view class="PriceInfo" v-if="item.state == 3 || item.state == 1">
				<view class="Earnest">
					<text class="size22">定金:</text>
					<text class="size32">￥{{ item.order_price }}</text>
				</view>
				<view class="Earnest" v-if="item.make_up_price > 0">
					<text class="size22">摄影:</text>
					<text class="size32">￥{{ item.make_up_price }}</text>
				</view>
			
			</view>

			<view class="PriceInfo" v-if="item.state == 2">
				<view class="Use">￥{{ item.payment }}</view>
			</view>
		</view> -->

        <emptys v-if="!pageData.length"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                titleStyle: {
                    fontWeight: 'bold',
                },
                list1: [
                    {
                        name: '全部',
                        state: '',
                    },
                    {
                        name: '待使用',
                        state: '3',
                    },
                    {
                        name: '已使用',
                        state: '2',
                    },
                ],
                current: 0,
                activeStyle: {
                    fontSize: '32rpx',
                    color: '#000',
                },
                inactiveStyle: {
                    fontSize: '32rpx',
                    color: '#333',
                },
                color: '#d7b06d',
                More: true,
                page: 1,
                limit: 10,
                state: '', // 0:待支付 1：已成单  2：已核销 3：待付尾款 4:已过期 5：已退款  6:退款中
                pageData: [],
            };
        },
        onLoad() {
            this.getLockOrderList();
        },
        methods: {
            getLockOrderList() {
                this.$http
                    .get({
                        url: '/SiteApiV2/getLockOrderList',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            state: this.state,
                        },
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data || [];
                        this.page == 1
                            ? (this.pageData = Result)
                            : (this.pageData = this.pageData.concat(Result));
                        if (Result.length < this.limit) this.More = false;
                    });
            },

            toDetails(id) {
                this.toUrl(`/Reserve/After/preOrder?order_id=${id}`);
            },
            click(item) {
                this.state = item.state;
                this.getLockOrderList();
                this.More = true;
                this.page = 1;
            },
            orderStare(item) {
                if (item.state == 1 || item.state == 3) return '待使用';
                if (item.state == 2) return '已使用';
                if (item.state == 4) return '已过期';
                if (item.state == 5) return '已退款';
                if (item.state == 6) return '退款中';
            },
        },
        computed: {
            // ...mapState(['color'])
        },
    };
</script>
<style lang="scss">
    page {
        background-color: $pages;
    }
</style>
<style lang="scss" scoped>
    .tabs {
        width: 100%;
        padding: 0 80rpx;
        height: 90rpx;

        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        .lis {
            padding: 6rpx 24rpx;
            color: #000;
            font-size: 28rpx;
            margin-top: 20rpx;
            border-radius: 4rpx;
        }
        .Active {
            background-image: linear-gradient(45deg, #d85e59 0%, #e59689 99%, #e59689 100%);
            color: #fff;
        }
    }
    .list {
        width: 720rpx;
        margin: 20rpx auto 0;
        background-color: #fffcf7;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        flex-direction: column;

        position: relative;
        .name {
            color: #000;
            font-size: 30rpx;
        }
        .txtie {
            color: #999;
            font-size: 28rpx;
            margin-top: 20rpx;
        }
        .lokk {
            width: 170rpx;
            height: 60rpx;
            // background-color: $color_d85;
            background-image: linear-gradient(45deg, #d85e59 0%, #e59689 99%, #e59689 100%);
            color: #fff;
            font-size: 26rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: flex-end;
            border-radius: 10rpx;
        }
    }
    .Tips {
        height: 50rpx;
        padding: 0 20rpx;
        border-radius: 0 0 10rpx 10rpx;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 24rpx;
    }
    .Waiting {
        background-color: #009933;
    }
    .used {
        background-color: #333;
    }
    .expiredbg {
        background-color: #bcbcbc;
    }
    .Img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .conTxt {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .name {
        font-size: 30rpx;
        color: #000;
    }
    .Time {
        color: #999;
        font-size: 22rpx;
        margin-top: 6rpx;
    }
    .table_li {
        padding: 4rpx 10rpx;
        border: 1px solid var(--color);
        border-radius: 10rpx;
        color: var(--color);
        font-size: 20rpx;
        margin-top: 10rpx;
        margin-right: 10rpx;
    }
    .PriceInfo {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        align-self: flex-end;
        margin-left: 10rpx;
    }
    .Use {
        color: #ff4b4e;
        font-size: 34rpx;
    }
    .Earnest {
        display: flex;
        align-items: center;
        color: #ff4b4e;
    }
    .Balance {
        margin-top: 8rpx;
        color: #333;
        display: flex;
        align-items: center;
    }
    .expired {
        background-color: #f1f1f1;
    }
    .expired .Earnest {
        color: #66666f;
    }
    .expired .table_li {
        color: #66666f;
        border: 1rpx solid #66666f;
    }
    .expired .Balance {
        color: #66666f;
    }
</style>
